<ng-form hidden name="clean">
  <input name="isClean" ng-model="keyValuesClean">
</ng-form>

<div class="labels">
    <div class="form-inline labels-edit" ng-show="editable">
      <ng-form class="edit-label" name="form" novalidate>

        <div row cross-axis="start">
          <div
            flex grow="5" shrink="5"
            class='form-group'
            ng-class="{'has-error': form.key.$error.oscKeyValid}"
            style="margin-right: 10px;">
            <input
              class="form-control"
              type="text"
              name="key"
              ng-attr-placeholder="{{keyTitle}}"
              ng-model="key"
              ng-model-options="{ debounce: 200 }"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              osc-input-validator="key"
              osc-unique="entries"
              on-enter="form.$valid && addEntry()"
              ng-keyup="isClean()">
          </div>

          <div
            flex grow="5" shrink="5"
            class="form-group"
            ng-class="{'has-error': form.value.$error.oscValueValid}"
            style="margin-right: 10px;">
            <input
              class="form-control"
              type="text"
              name="value"
              ng-attr-placeholder="{{valueTitle}}"
              ng-model="value"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              osc-input-validator="value"
              on-enter="form.$valid && addEntry()"
              ng-keyup="isClean()">
          </div>
          <!-- We need to replace button tag with a link tag cause we are embedding this directive into different forms (BC edit
          form, from image form) and in order to be able to submit the top level form with hitting Enter key we needed to replace buttons with links.
          Based on: https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action -->
          <a class="btn btn-default add-key-value"
            href=""
            role="button"
            ng-click="addEntry()"
            ng-disabled="form.$invalid || !key || !value">
            Add
          </a>
        </div>

        <div ng-if="showCommmitWarning" class="has-error">
          <span class="help-block">
            Please add or <a href="" ng-click="clear()">clear</a> this {{(keyTitle || 'key') | lowercase}}-{{(valueTitle || 'value') | lowercase}} pair
          </span>
        </div>

        <div row class="has-error" ng-show="form.key.$error.oscUnique">
          <span class="help-block">
            Duplicate {{(keyTitle || 'key') | lowercase}}: {{key}}
          </span>
        </div>


        <div row class="has-error" ng-show="form.key.$error.oscKeyValid">
          <span class="help-block">Please enter a valid {{setErrorText(keyValidator)}}
            <span class="help action-inline" ng-if="keyValidationTooltip">
              <a href="" data-toggle="tooltip" data-original-title="{{keyValidationTooltip}}">
                <i class="pficon pficon-help"></i>
              </a>
            </span>
          </span>
        </div>



        <div row class="has-error" ng-show="form.value.$error.oscValueValid">
          <span class="help-block">Please enter a valid value
            <span class="help action-inline" ng-if="keyValidationTooltip">
              <a href="" data-toggle="tooltip" data-original-title="{{valueValidationTooltip}}">
                <i class="pficon pficon-help"></i>
              </a>
            </span>
          </span>
        </div>

      </ng-form>

      <div class="gutter-top">
        <!-- predefined keys -->
        <div ng-repeat="(key,value) in entries | valuesIn:readonlyKeys">
          <div row cross-axis="start">
            <div
              flex grow="5" shrink="5"
              class="truncate">{{key}}</div>
            <div
              flex grow="5" shrink="5"
              style="margin-left: 10px;"
              class="truncate">{{value}}</div>
            <div
              main-axis="end" cross-axis="baseline"
              style="flex-basis: 50px; max-width: 50px;">
              &nbsp;
            </div>
          </div>
        </div>

        <!-- user defined keys -->
        <div ng-repeat="(key,value) in entries | valuesNotIn:readonlyKeys">
          <div
            row cross-axis="start"
            ng-controller="KeyValuesEntryController">

            <!-- view, edit/delete -->
            <div
              flex grow="5" shrink="5"
              class="truncate"
              ng-attr-title="{{key}}">{{key}}</div>

            <div
              flex grow="5" shrink="5"
              class="truncate"
              ng-hide="editing"
              ng-attr-title="{{value}}"
              style="margin-left: 10px;">
              {{value}}
            </div>

            <div
              row
              main-axis="end"
              cross-axis="baseline"
              ng-hide="editing"
              style="flex-basis: 50px;">
              <a
                href=""
                ng-click="edit()"
                class="btn btn-default btn-xs"
                title="Edit">
                <i class="icon icon-pencil"></i>
              </a>
              <a
                href=""
                ng-click="deleteEntry(key)"
                class="btn btn-default btn-xs"
                title="Delete"
                ng-if="allowDelete(key)">
                <i class="fa fa-times"></i>
              </a>
            </div>

            <!-- editing view, save/cancel -->
            <div
              row cross-axis="start" flex grow="5" shrink="5"
              ng-show="editing">
              <input
                class="form-control"
                type="text"
                ng-value="value"
                ng-model="value"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                style="margin-left: 6px;">
            </div>

            <div
              row main-axis="end" cross-axis="baseline"
              ng-show="editing"
              style="flex-basis: 50px;">
              <div>
                <a
                  href=""
                  ng-click="update(key, value, $parent.entries)"
                  class="btn btn-default btn-xs"
                  title="Submit">
                  <i class="icon icon-ok"></i>
                </a>
              </div>
              <a
                href=""
                ng-click="cancel()"
                class="btn btn-default btn-xs"
                title="Cancel">
                <i class="icon icon-remove"></i>
              </a>
            </div>

          </div>
        </div>


      </div>
    </div>
    <div ng-hide="editable">
      <div ng-if="(entries | hashSize) === 0"><strong>None</strong></div>
      <ul ng-if="(entries | hashSize) !== 0" class="labels-readonly label-list list-unstyled">
        <li ng-repeat="(key,value) in entries">
          <span class="key truncate" ng-attr-title="{{key}}">{{key}}</span>
          <span class="value truncate" ng-attr-title="{{value}}">{{ value }}</span>
        </li>
      </ul>
    </div>
</div>
